<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>
  <!-- <p>helloworld1</p>
  <p>helloworld2</p>
  <svg>
    <rect></rect>
  </svg> -->

  <div id="app" class="app">
    <p></p>
    <p id="second" class="myclass"></p>
    <p class="myclass"></p>
  </div>

  <script>
    //选择器的使用
    // var body = d3.select('body')
    // // var p1= d3.select('p')
    // var p1 = body.select('p')
    // var p = body.selectAll('p')
    // var svg = body.select('svg')
    // var rect = svg.select('rect')
    // // var app = d3.select("#app")
    // var app = d3.select(".app")

    // d3.select("#app").text('1000phone').attr('style','30px')

    var data = "好程序员18"
    var container = d3.select('#app');
    // container.selectAll('p').datum(data).text((item, index) => {
    // return "第 " + index + " 个元素绑定的数据是： " + item;
    // })

    var datalist = [10, 20, 30]
    container.selectAll('p').data(datalist).text((d, i) => {
      return d;
    }).style('color', (d, i) => {
      if (d > 10) {
        return 'red'
      } else {
        return 'blue'
      }
    }).style('font-size',(d,i)=>{
      return d+'px';
    })

    // d3.select("#second")
    // d3.selectAll(".myclass")

    //插入
    container.append('p').text('china').attr('id', 'china')
    // container.insert('p').text(50).attr('id', 'five')

    //删除
    // d3.select('#china').remove()
    container.select("#china").remove()



  </script>

</body>

</html>